<template>
    <div class="con">
        <div class="toutu">
            <img src="../assets/images/toutu1.png" alt class="toutu1">
            <img src="../assets/images/icon1.png" alt class="icon">
            <p class="title">收款立即到账 第三方支付公司提供收单服务</p>
            <img src="../assets/images/wenhao.png" alt class="wenhao">
        </div>
        <img src="../assets/images/line.png" alt class="line">
        <div class="info">
            <dl>
                <dd>收款金额(元)</dd>
                <dt>
                    <span class="rmb">¥</span>
                    <input type="text" placeholder="请输入收款金额" pattern="[0-9]*" v-model="money">
                </dt>
            </dl>
        </div>
        <div class="info1" @click="updatesavecard()">
            <dl>
                <dd>到账储蓄卡</dd>
                <dt>
                    <p>
                        <img :src="logoUrl" alt class="icon">
                        {{bankName}}({{accountNo}}) {{accountName}}
                    </p>
                    <img src="../assets/images/more1.png" alt class="more1">
                </dt>
            </dl>
            <!-- <dl>
                <dd>选择通道</dd>
                <dt>
                    <img src="../assets/images/nochoose1.png" alt class="choose">
                    <img src="../assets/images/ok.png" alt class="choose">
                    <span>通道A</span>
                    <img src="../assets/images/nochoose1.png" alt class="choose">
                    <span>通道B</span>
                </dt>
            </dl>-->
        </div>
        <div class="tip">
            <p>当前费率 0.55%+2</p>
            <!-- <p>首刷单笔金额不能大于1万；首日刷卡金额不能大于2万</p> -->
            <!-- <p class="last">购买VIP享0.5%+1费率 <img src="../assets/images/redmore.png" alt=""></p> -->
        </div>

        <div class="btn" @click="ok()">
            <button>下一步</button>
        </div>

        <!-- 弹框  透明背景-->
        <div class="bg" v-show="show"></div>
        <div class="tk" v-show="show">
            <h3>您尚未添加到账储蓄卡</h3>
            <p>一步添加，便捷、安全</p>
            <div class="tkbtn">
                <div class="tkbtn1" @click="cancel()">暂不</div>
                <div class="tkbtn2" @click="add()">添加</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "credit",
    data() {
        return {
            show: false,
            accountName: "",
            logoUrl: "",
            bankName: "",
            accountNo: "",
            money: ""
        };
    },
    methods: {
        cancel() {
            // 回到首页
            this.$router.push({ name: "home" });
        },
        add() {
            this.$router.push({ name: "addsavecard",params: {type: 1 }});
        },
        updatesavecard() {
            this.$router.push({ name: "updatesavecard" ,params: {type: 1 }});
        },
        ok() {
            if (this.money == "") {
                this.$toast("请输入收款金额");
            } else {
                // 查询同名卡渠道
                this.axios({
                    method: "post",
                    headers: { token: localStorage.getItem("token") },

                    url: `${
                        this.siteUrl
                    }/app/cj/pay/getAllChannel?appid=web.2019&format=json&timestamp=${
                        this.timestamp
                    }`,
                    data: {
                        userId: localStorage.getItem("userId")
                    }
                })
                    .then(response => {
                        console.log(response);
                        if (response.data.success == 1) {
                            this.$router.push({ name: "choosecredit" });
                            localStorage.setItem(
                                "channelId",
                                response.data.data[0].payChannelId
                            );
                             localStorage.setItem("money",this.money);
                        } else {
                            this.$toast(response.data.message);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        this.$toast("连接服务器异常");
                    });
            }
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());

        this.axios({
            method: "post",
            url: `${
                this.siteUrl
            }/app/bankCard/getBankCardListByUserId?appid=web.2019&format=json&timestamp=${
                this.timestamp
            }`,
            data: {
                userId: localStorage.getItem("userId"),
                cardType: 0
            }
        })
            .then(response => {
                console.log(response);
                if (response.data.success == 1) {
                    if (response.data.data.length == 0) {
                        this.show = true;
                    } else {
                        this.accountName = response.data.data[0].accountName;
                        this.logoUrl = response.data.data[0].logoUrl;
                        this.bankName = response.data.data[0].bankName;
                        this.accountNo = response.data.data[0].accountNo;
                        this.accountNo = this.accountNo.substring(
                            this.accountNo.length - 4
                        );
                        localStorage.setItem("accountName", this.accountName);
                        localStorage.setItem("idNumber", response.data.data[0].idNumber);
                        localStorage.setItem("cxphone", response.data.data[0].phone);
                        localStorage.setItem("cxbankName", response.data.data[0].bankName);
                        localStorage.setItem("cxaccountNo", response.data.data[0].accountNo);
                        localStorage.setItem("repayCardId", response.data.data[0].id);
                        localStorage.setItem("cxlogoUrl", this.logoUrl);

                        



                    }
                } else {
                    this.$toast(response.data.message);
                }
            })
            .catch(error => {
                console.log(error);
                this.$toast("连接服务器异常");
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #fff;
}
.con .toutu {
    width: 100%;
    position: relative;
}
.con .toutu .toutu1 {
    width: 100%;
}
.con .toutu .icon {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 24px;
    height: 24px;
}
.con .toutu .wenhao {
    position: absolute;
    top: 37px;
    right: 30px;
    width: 16px;
    height: 16px;
}
.con .toutu .title {
    color: #fff;
    font-size: 12px;
    font-weight: 200px;
    opacity: 0.6;
    position: absolute;
    left: 64px;
    top: 35px;
}
.con .line {
    width: 96%;
    margin-left: 2%;
    margin-top: 5px;
}
.con .info {
    width: 90%;
    margin-left: 5%;
}
.con .info dd {
    height: 40px;
    line-height: 40px;
    color: #a6a9b5;
    font-weight: 200;
}
.con .info dt {
    height: 60px;
    line-height: 60px;
    width: 100%;
    font-size: 34px;
}
.info dl {
    position: relative;
    margin-top: 20px;
    border-bottom: 1px solid #ececec;
}
.info dl .rmb {
    position: absolute;
    font-size: 16px;
}

.con .info input {
    width: 100%;
    text-indent: 28px;
}
.con .info1 dl {
    height: 60px;
    border-bottom: 1px solid #ececec;
    width: 90%;
    margin-left: 5%;
}
.con .info1 dd {
    line-height: 60px;
    color: #a6a9b5;
    font-weight: 200;
    float: left;
    width: 30%;
}
.con .info1 dt {
    float: right;
    width: 70%;
    height: 60px;
    line-height: 60px;
    position: relative;
    text-align: right;
    color: #2d3659;
}
.con .info1 dt p {
    width: 95%;
    height: 60px;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.con .info1 p .icon {
    vertical-align: middle;
    width: 18px;
    height: 18px;
    margin-right: 5px;
}
.con .info1 dt .more1 {
    position: absolute;
    top: 25px;
    right: 0px;
    width: 6px;
}
.con .info1 dt .choose {
    margin-left: 30px;
}
.choose {
    width: 20px;
    height: 20px;
    vertical-align: -5px;
}

.btn {
    width: 90%;
    margin: 0 auto;
    height: 48px;
    line-height: 48px;
    margin-top: 60px;
    background: #ffae4e;
    text-align: center;
    border-radius: 25px;
    box-shadow: 0px 10px 30px 0px #fbc27f;
}
.btn button {
    width: 100%;
    font-size: 17px;
    color: #fff;
    background: transparent;
}
input::-webkit-input-placeholder {
    color: #e9eaee;
    font-size: 34px;
}
.tip {
    width: 90%;
    margin-left: 5%;
    margin-top: 64px;
}
.tip p {
    font-size: 12px;
    font-weight: 200;
    color: #a6a9b5;
}
.tip .last {
    color: #ff724f;
    margin-top: 24px;
}
.tip .last img {
    width: 6px;
    vertical-align: -1px;
}

/* 注册弹框 */
.bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /*  利用CSS透明效果*/
    position: fixed;
    /* 固定在浏览器里*/
    top: 0px;
    left: 0px;
    z-index: 9999;
}

.tk {
    width: 80%;
    height: 130px;
    background: white;
    position: fixed;
    top: 30%;
    left: 10%;
    z-index: 99999;
    overflow: hidden;
    border-radius: 7px;
}
.tk h3 {
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 200;
}
.tk p {
    color: #a6a9b5;
    text-align: center;
    font-size: 12px;
    margin-top: 12px;
    font-weight: 200;
}
.tk .tkbtn {
    width: 100%;
    height: 50px;
    margin-top: 10px;
    border-top: 1px solid #f2f2f2;
    font-size: 18px;
    text-align: center;
    line-height: 50px;
    font-weight: 200;
}
.tk .tkbtn1 {
    float: left;
    width: 50%;
    color: #a6a9b5;
}
.tk .tkbtn2 {
    float: left;
    width: 50%;
    color: #ffae4e;
}
</style>
